<template>
  <div>
    <el-button type="primary" @click="clickNew" size="mini">新增</el-button>
    <el-drawer :withHeader="false" :visible.sync="dialog" direction="rtl" :with-header="false" ref="drawer"
      size="652px">
      <div style="margin:20px">
        <el-form :model="ruleForm" label-position="right"
         status-icon :rules="rules" ref="ruleForm" label-width="83px" >
          <el-form-item label="仓库地址:" prop="address" required>
            <el-input class="form-input2" v-model="ruleForm.address" :disabled="disabled" size="small"></el-input>
          </el-form-item>
          <el-form-item label="仓库类型:" prop="respType" required>
            <el-select class="form-input2" v-model="ruleForm.respType" placeholder="请选择类型..." autocomplete="off" auto-complete="new-password">
              <el-option
                v-for="item in respTypeList"
                :key="item.key"
                :label="item.label"
                :value="item.label">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目关联:" prop="choseMember" required>
            <el-transfer
              :titles="['可选项目', '已选项目']"
              @change="handleChange"
              height="500px"
              :props=" {
                key: 'projectId',
                label: 'projectName'
              }"
              filterable
              filter-placeholder="请输人员姓名"
              v-model="ruleForm.choseMember"
              :data="data.memberList">
            </el-transfer>
          </el-form-item>
          <el-form-item style="float:right; margin-right: 30px">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="dialog = false">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
  import { add, edit} from '@/api/repository';
  import { findAll } from '@/api/project'
  export default {
    name: "PopVue",
    data() {
      var checkAddress = (rule, value, callback) => {
        if (value==='') {
          return callback(new Error('请输入仓库地址'));
        }
        callback();
      };
      var checkRespType = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择仓库类型'));
        }
        callback();
      };
      var checkMember = (rule, value, callback) => {
        if (value.length===0) {
          callback(new Error('请勾选项目'));
        }
        callback();
      };

      return {
        dialog: false,
        disabled: true,
        respTypeList: [{key: 1, label: 'SIT'},{key: 2, label: 'UAT'},{key: 3, label: 'PP'},{key: 4, label: 'PI'}],
        ruleForm: {
          crId: '',
          address: '',
          respType: '',
          choseMember: []
        },
        data: {
          leaderList: [],
          memberList: []
        },
        rules: {
          address: [
            { validator: checkAddress, trigger: 'blur' }
          ],
          respType: [
            { validator: checkRespType, trigger: 'blur' }
          ],
          choseMember: [
            { validator: checkMember, trigger: 'blur'}
          ]
        },
        options: [{
          value: 'admin',
          label: 'admin'
        }, {
          value: 'leader',
          label: 'leader'
        }, {
          value: 'developer',
          label: 'developer'
        }, {
          value: 'tester',
          label: 'tester'
        }],
      }
    },
    methods: {
      handleChange(value, direction, movedKeys) {
          // console.log(this.ruleForm.choseMember);
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.disabled
            ?edit(this.ruleForm).then(response => {
              if (response.code===400) {
                return
              }
              this.$parent.$parent.handleClickSearch()
              this.dialog = false
              }).catch(error => {
                console.log(error)
              })
            :add(this.ruleForm).then(response => {
              if (response.code===400) {
                return
              }
              this.$parent.$parent.handleClickSearch()
              this.dialog = false
            }).catch(error => {
              console.log(error)
            })
          } else {
            return false;
          }
        });
      },
      resetForm(formName) {
        if (this.$refs[formName]!=null) {
          this.$refs[formName].resetFields();
        }
      },
      clickNew(row) {
        this.disabled = false
        this.dialog = true
        this.resetForm('ruleForm')
        if (row.address!=null) {
          this.ruleForm.crId = row.crId
          this.ruleForm.address = row.address
          this.ruleForm.respType = row.type

          if (row.membersList!==null) {
            this.ruleForm.choseMember = row.membersList
          } else {
            this.ruleForm.choseMember = []
          }
          this.disabled = true
        }
      },
      initData() {
        findAll().then(response => {
          this.data.memberList = response
        })
      }
    },
    mounted() {
      this.initData()
    }
  }

</script>
<style>
.el-form-item__content{
  margin-left:0 !important;
}
.el-transfer-panel {
   height: 350px !important;
}
.el-transfer-panel__body {
  height: 380px !important;
}
.el-checkbox-group {
  height: 400px !important;
}
.form-input2{
  width: 500px;
}

</style>
